<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="container">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		<div id="article">
			<p>第一段文字</p>
		</div>
	</div>

	<script type="text/javascript">
		// 例1：事件委托
		var ul = document.getElementById('container'),
			li = document.getElementsByTagName('li'),
			i = li.length - 1;
		ul.onclick = function(e) {
			var e = e || window.event,
				target = e.target || e.srcElement;
			if (target.nodeName.toLowerCase() === 'li') {
				target.style.backgroundColor = 'gray';
			}
		}

		// 例2:委托对新增的节点同样有效
		var article = document.getElementById('article');
		article.onclick = function(e) {
			var e = e || window.event,
				target = e.target || e.srcElement;
			if (target.nodeName.toLowerCase() === 'p') {
				target.innerHTML = '我要更改这段内容';
			}
		}
		// 新增节点
		var p = document.createElement('p');
		p.innerHTML = '新增一段内容';
		article.appendChild(p);

		
	</script>
</body>
</html>